<template>
	<view class="boxContent">
		<view class="content">
			<view class="boxNav">
				<view class="leftText">您对商家/菜品满意吗？</view>
				<view class="rigthText">评价</view>
			</view>
			<view class="boxItem">
				<view>
					<image class="imageBox" :src="imageUrl"></image>
				</view>
				<view class="foodBox">{{foodName}}</view>
			</view>
			<view class="boxFlex gtBox">
				<view class="bormg">口味 </view>
				<l-starRate v-model="star" :disabled="false"></l-starRate>
			</view>
			<view class="boxFlex mtjl">
				<view class="bormg">份量 </view>
				<l-starRate v-model="star1" :disabled="false"></l-starRate>
			</view>
			<view class="boxFlex">
				<view class="bormg">配送 </view>
				<l-starRate v-model="star2" :disabled="false"></l-starRate>
			</view>
			<view class="boxFlex">

				<view class="boxArea1">
					<textarea maxlength="120" v-model="msg" class="boxArea" placeholder="仅限120个汉字" />
				</view>
			</view>
			<view class="boxFlex">
				<button size="mini" class="sfy" @click="saveData()">提交</button>

			</view>
		</view>
	</view>

</template>

<script>
	import {
		sumitPlFn
	} from "@/request/api.js";
	import myIssue from '@/components/myIssue/myIssue.vue'
	export default {
		components: {
			myIssue
		},
		data() {
			return {
				title: 'Hello',
				star: "",
				star1: "",
				star2: "",
				goodId: "",
				msg: "",
				imageUrl: "",
				foodName: "",
			}
		},
		onLoad(option) {
			let that = this
			that.goodId = option.goodId
			that.imageUrl = option.imageUrl
			that.foodName = option.foodName
			console.log(option, 'optionoption');
		},
		methods: {
			async saveData() {
				let that = this
				let res = await sumitPlFn({
					method: "POST",
					data: {
						orderId: that.goodId,
						flavor: that.star,
						quantity: that.star1,
						delivery: that.star2,
						msg: that.msg
					},
				})
				if (res.code == 200) {
					console.log(res.message, 'res.message');
					uni.showToast({
						title: res.message,
						icon: "success",
						duration: 500,

					});
					setTimeout(function() {
						// switchTab
						MyMinix.goToUrl('/pages/index/index');
					}, 500);

				} else {

					uni.showToast({
						title: res.message,
						icon: "none",
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.boxContent {
		height: 100vh;
		background-color: #f6f6f6;
		padding-top: 20rpx;
	}

	.content {
		background-color: #fff;
		margin: 0rpx 30rpx 0rpx 30rpx;
		border-radius: 20rpx;
		padding: 20rpx;

		.boxFlex {
			display: flex;
			// justify-content: center;
			align-items: center;
		}

		.boxNav {
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #eeeeee;
			padding-bottom: 18rpx;

			.leftText {
				color: #000000;
				font-family: PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
			}

			.rigthText {
				color: #000000;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
			}
		}



		.sfy {
			margin-top: 30rpx;
			width: 284rpx;
			height: 84rpx;
			line-height: 84rpx;
			background: #eb5b1e;
			color: #fff;
			text-align: center;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
		}

		.boxArea {
			border-radius: 20rpx;
			background: #f6f6f6;
			padding: 15rpx;
			box-sizing: border-box;
			width: 100%;
			height: 200rpx;
			margin-top: 20rpx;
		}

		.boxArea1 {
			margin-top: 30rpx;
			width: 100%;
		}

		.bormg {
			margin-right: 15rpx;
			color: #000000;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
		}

		.mtjl {
			margin-top: 36rpx;
			margin-bottom: 36rpx;
		}

		.gtBox {
			margin-top: 30rpx;
		}

		.boxItem {
			display: flex;
			align-items: center;
			margin-top: 30rpx;
			.imageBox {
				width: 100rpx;
				height: 100rpx;
				border-radius: 20rpx;
			}

			.foodBox {
				margin-left: 10rpx;
				color: #000000;
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
			}
		}
	}
</style>